<template>
	<div>
		<carousel></carousel>
		<div class="container-water-fall">
			<!-- 			<div><button @click="loadmore">loadmore</button> <button @click="mix">mix</button> <button @click="switchCol('5')">5列</button>
				<button @click="switchCol('8')">8列</button> <button @click="switchCol('10')">10列</button> </div> -->

			<waterfall :col='col' :width="itemWidth" :gutterWidth="gutterWidth" :data="data" @loadmore="loadmore" @scroll="scroll">

				<template>
					<div @click="test(item.photo_id)" class="cell-item" v-for="(item, index) in data" :key="index">
						<img v-lazy="item.thumb_w_url_cos" alt="加载错误" />
					</div>
				</template>

			</waterfall>
		</div>
	</div>
</template>

<script>
	
	import carousel from '../components/carousel.vue';
	// import waterfall from 'vue-waterfall2';
	import {
		get_photo
	} from '../../API/high_plus.js';
	import {get_detail} from '../../API/get_detail.js';


	
	
	export default {
		components: {
			carousel,
		},
		data() {
			return {
				data: [],
				col: 5,
			}
		},
		computed: {
			itemWidth() {
				return (138 * 0.5 * (document.documentElement.clientWidth / 375))
			},
			gutterWidth() {
				return (9 * 0.5 * (document.documentElement.clientWidth / 375))
			}
		},
		methods: {
			scroll() {
				// console.log(scrollData)
			},
			switchCol() {
				// this.col = col
				// console.log(this.col)
			},
			loadmore() {
				// this.data = this.data.concat(this.data)
			},
			test(id){
				get_detail(id).then(res=>{
					this.$router.push({
						name:'Detail',
						query:{
							item: res.data.data
						}
					})
				})

			}
		},
		async created() {
			await get_photo({
				kind: 2,
			}).then(res => {
				// console.log(res.data.data.photo_list,999999999999999)
				this.data = res.data.data.photo_list
				console.log(res.data.data.photo_list, 999)
				console.log(this.data)
			});

		
		}
	}
</script>

<style lang="scss" scoped>
.cell-item {
  margin: 0 4px 8px;
  border: 4px solid #fff;
  border-radius: 10%;
  overflow: hidden;
  cursor: pointer;
  img {
    width: 100%;
    display: block;
    transition: all 0.3s;
    &:hover {
      transform: scale(1.03);
    }
  }
}
</style>
